<!DOCTYPE html>
<html lang="zh">

<head>
	<meta charset="utf-8">
	<title>管理员</title>
	<meta name="renderer" content="webkit">
	<meta name="referrer" content="never">
	<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
	<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
	<link rel="stylesheet" href="../assets/lib/layui/css/layui.css" media="all">
	<link rel="stylesheet" href="../assets/css/public.css" media="all">
</head>

<body>
	<div class="admin-container">
		<div class="admin-main">
			<fieldset class="table-search-fieldset">
				<legend>搜索信息</legend>
				<form class="layui-form" lay-filter="search">
					<div class="layui-form-item">
						<div class="layui-inline" style="width: 100px;">
							<select name="status">
								<option value="">不限状态</option>
								<option value="1">启用</option>
								<option value="0">禁用</option>
							</select>
						</div>
						<div class="layui-inline">
							<input type="text" name="user" maxlength="30" placeholder="用户名" lay-verify="" autocomplete="off" class="layui-input">
						</div>
						<div class="layui-inline">
							<input type="text" name="name" maxlength="4" placeholder="姓名" lay-verify="zh" autocomplete="off" class="layui-input">
						</div>
						<div class="layui-inline">
							<input type="text" name="loginTime" placeholder="最后登录" lay-verify="datetime" autocomplete="off" class="layui-input" readonly>
						</div>
						<div class="layui-inline">
							<button type="submit" class="layui-btn layui-btn-primary" lay-submit lay-filter="search-submit" style="display: flex;"><i class="layui-icon layui-icon-search"></i> 搜 索</button>
						</div>
					</div>
				</form>
			</fieldset>
			<table class="layui-table" id="admin-list" lay-filter="admin-list"></table>
		</div>
	</div>
	<script src="../assets/lib/layui/layui.js" charset="utf-8"></script>
	<script src="../assets/js/lay-config.js" charset="utf-8"></script>
	<script src="../assets/js/public.min.js" charset="utf-8"></script>
	<script type="text/javascript">
		layui.use(['jquery', 'form', 'table', 'laydate', 'upload'], function() {
			var $ = layui.jquery,
				form = layui.form,
				table = layui.table,
				laydate = layui.laydate,
				upload = layui.upload;

			laydate.render({
				elem: $('.layui-form [name="loginTime"]')[0],
				type: 'datetime',
				trigger: 'click'
			});

			var tableIns = table.render({
				elem: '#admin-list',
				url: lianyi.api('admin_list', 1),
				method: 'POST',
				toolbar: 'default',
				defaultToolbar: ['filter', 'print', 'exports'],
				limits: [50, 100, 200, 300, 500],
				limit: 50,
				page: true,
				cols: [
					[
						{ type: "checkbox", fixed: 'left' },
						{ type: "numbers", title: '序号' },
						{ field: 'user', minWidth: 90, title: '用户名', event: 'user', sort: true },
						{ field: 'pass', minWidth: 90, title: '密码', event: 'pass' },
						{ field: 'name', minWidth: 105, title: '姓名', event: 'name', align: 'center', sort: true },
						{
							field: 'avatar',
							width: 65,
							title: '头像',
							event: 'avatar',
							templet: function(d) {
								return d.avatar ? '<img src="{0}" alt="{1}" width="28px" height="28px" enlarge="10"/>'.format(d.avatar, d.name || d.user) : '';
							},
							align: 'center'
						},
						{ field: 'sex', width: 75, title: '性别', align: 'center', templet: function(d) { return d.sex === 0 ? '女' : '男'; }, sort: true },
						{ field: 'mobile', title: '手机号码', width: 120, event: 'mobile', sort: true },
						{ field: 'email', minWidth: 100, title: '邮箱', event: 'email', sort: true, sort: true },
						{ field: 'birthday', width: 105, title: '生日', event: 'birthday', sort: true },
						{ field: 'loginTime', width: 160, title: '最后登录', sort: true },
						{
							field: 'status',
							title: '状态',
							width: 75,
							event: 'status',
							align: 'center',
							templet: function(d) {
								return '<i class="layui-icon {0}" style="font-size: 30px; color: {1};"></i>'
									.format(d.status === 1 ? 'layui-icon-ok-circle' : 'layui-icon-close-fill', d.status === 1 ? '#009688' : '#FF5722');
							},
							sort: true
						},
						{
							title: '操作',
							width: 85,
							align: 'center',
							fixed: 'right',
							templet: function(d) {
								return '<div class="layui-btn-group">' +
									'<button type="button" lay-event="update" class="layui-btn layui-btn-xs layui-btn-warm" tips="修改"><i class="layui-icon layui-icon-edit" style="margin-right: 0px;"></i></button>' +
									'<button type="button" lay-event="delete" class="layui-btn layui-btn-xs layui-btn-danger" tips="删除"><i class="layui-icon layui-icon-delete" style="margin-right: 0px;"></i></button>' +
									'</div>';
							}
						}
					]
				],
				done: function(d) {
					$('.layui-table-tool [lay-event="update"]').hide();
				}
			});

			table.on('toolbar(admin-list)', function(obj) {
				var event = obj.event;
				switch (event) {
					case 'add':
						layer.open({
							title: '添加',
							shadeClose: true,
							maxmin: true,
							type: 2,
							content: lianyi.iframe('action'),
							area: ['360px', '380px'],
							success: function(layero, index) {
								// layer.iframeAuto(index);
							},
							end: function() {}
						});
						break;
					case 'update':
						break;
					case 'delete':
						var checkStatus = table.checkStatus('admin-list');
						var checkeds = checkStatus.data,
							arr = {};
						if (checkeds.length < 1) return false;

						$.each(checkeds, function(i, v) {
							arr[v.id] = '<b style="color: red;">' + (v.name || v.user) + '</b>';
						});

						layer.confirm('确定删除(<b style="color: #ff0000;">' + checkeds.length + '个</b>)：' + Object.values(arr).join(", ") + ' ？', {
							title: '删除管理员',
							shadeClose: true,
							btn: ['删除', '取消'],
							btn1: function(index) {
								lianyi.request({
									url: lianyi.api('delete', 1),
									data: { id: Object.keys(arr).join(',') },
									msg: '正在删除...',
									success: function(res) {
										layer.close(index);
									}
								});
								return false;
							}
						});
						break;
				}
			});

			table.on('tool(admin-list)', function(obj) {
				var data = obj.data,
					event = obj.event;

				switch (event) {
					case 'user':
						layer.prompt({
								title: '用户名',
								formType: 0,
								shadeClose: true,
								maxlength: 30,
								value: data.user,
								success: function(elem) {
									$('.layui-layer-content > .layui-layer-input', elem).attr('maxlength', 30).on('input propertychange', function() {
										if (/^\s+/.test($(this).val())) $(this).val($(this).val().replace(/^\s+/g, ''));
									});
								}
							},
							function(value, index, elem) {
								value = $.trim(value);
								if (value === data.user) return lianyi.fail('无变化！');
								lianyi.request({
									url: lianyi.api('update', 1),
									data: { id: data.id, user: value },
									msg: '正在修改...',
									success: function(res) {
										layer.close(index);
										obj.update({ user: value });
									}
								});
							}
						);
						break;
					case 'pass':
						layer.prompt({
								title: '密码',
								formType: 0,
								shadeClose: true,
								maxlength: 30,
								value: data.pass,
								success: function(elem) {
									$('.layui-layer-content > .layui-layer-input', elem).attr('maxlength', 30).on('input propertychange', function() {
										if (/^\s+/.test($(this).val())) $(this).val($(this).val().replace(/^\s+/g, ''));
									});
								}
							},
							function(value, index, elem) {
								value = $.trim(value);
								if (value === data.pass) return lianyi.fail('无变化！');
								lianyi.request({
									url: lianyi.api('update', 1),
									data: { id: data.id, pass: value },
									msg: '正在修改...',
									success: function(res) {
										layer.close(index);
										obj.update({ pass: value });
									}
								});
							}
						);
						break;
					case 'name':
						layer.prompt({
								title: '姓名',
								formType: 0,
								shadeClose: true,
								allowBlank: true,
								maxlength: 4,
								value: data.name,
								success: function(elem) {
									$('.layui-layer-content > .layui-layer-input', elem).attr('maxlength', 4).on('input propertychange', function() {
										if (/[^\u0391-\uFFE5]/.test($(this).val())) $(this).val($(this).val().replace(/[^\u0391-\uFFE5]/g, ''));
									});
								}
							},
							function(value, index, elem) {
								value = $.trim(value);
								if (value === data.name || (data.name === null && value === '')) return lianyi.fail('无变化！');
								lianyi.request({
									url: lianyi.api('update', 1),
									data: { id: data.id, name: value },
									msg: '正在修改...',
									success: function(res) {
										layer.close(index);
										obj.update({ name: value });
									}
								});
							}
						);
						break;
					case 'birthday':
						layer.prompt({
								title: '生日',
								formType: 0,
								shadeClose: true,
								allowBlank: true,
								maxlength: 10,
								value: data.birthday,
								success: function(elem) {
									var dom = $('.layui-layer-content > .layui-layer-input', elem).prop('readonly', true);
									laydate.render({
										elem: dom[0],
										type: 'date',
										trigger: 'click'
									});
								}
							},
							function(value, index, elem) {
								value = $.trim(value);
								if (value === data.birthday || (data.birthday === null && value === '')) return lianyi.fail('无变化！');
								lianyi.request({
									url: lianyi.api('update', 1),
									data: { id: data.id, birthday: value },
									msg: '正在修改...',
									success: function(res) {
										layer.close(index);
										obj.update({ birthday: value });
									}
								});
							}
						);
						break;
					case 'mobile':
						layer.prompt({
								title: '手机号码',
								formType: 0,
								shadeClose: true,
								allowBlank: true,
								maxlength: 11,
								value: data.mobile,
								success: function(elem) {
									$('.layui-layer-content > .layui-layer-input', elem).attr('maxlength', 11).on('input propertychange', function() {
										if (/[^\d]/.test($(this).val())) $(this).val($(this).val().replace(/[^\d]/g, ''));
									});
								}
							},
							function(value, index, elem) {
								value = $.trim(value);
								if (value == data.mobile || (data.mobile === null && value === '')) return lianyi.fail('无变化！');
								else if (value !== '' && !REGEX.isMobile(value)) return lianyi.fail('手机号码格式错误！');
								lianyi.request({
									url: lianyi.api('update', 1),
									data: { id: data.id, mobile: value },
									msg: '正在修改...',
									success: function(res) {
										layer.close(index);
										obj.update({ mobile: value });
									}
								});
							}
						);
						break;
					case 'email':
						layer.prompt({
								title: '邮箱',
								formType: 0,
								shadeClose: true,
								allowBlank: true,
								maxlength: 50,
								value: data.email,
								success: function(elem) {
									$('.layui-layer-content > .layui-layer-input', elem).attr('maxlength', 50).on('input propertychange', function() {
										if (/^\s+/.test($(this).val())) $(this).val($(this).val().replace(/^\s+/g, ''));
									});
								}
							},
							function(value, index, elem) {
								value = $.trim(value);
								if (value === data.email || (data.email === null && value === '')) return lianyi.fail('无变化！');
								else if (value !== '' && !REGEX.isEmail(value)) return lianyi.fail('邮箱格式错误！');
								lianyi.request({
									url: lianyi.api('update', 1),
									data: { id: data.id, email: value },
									msg: '正在修改...',
									success: function(res) {
										layer.close(index);
										obj.update({ email: value });
									}
								});
							}
						);
						break;
					case 'avatar':
						layer.open({
							title: '上级',
							shadeClose: true,
							btn: ['确定', '置空', '取消'],
							shadeClose: true,
							type: 1,
							content: '<div class="layui-form">' +
								'<div class="layui-upload-drag" id="avatar-upload">' +
								'<i class="layui-icon layui-icon-upload {0}"></i>'.format(data.avatar ? 'layui-hide' : '') +
								'<img src="{0}" alt="{1}" width="50px" height="50px" class="{2}" enlarge="5">'.format(data.avatar || '', data.name || data.user, data.avatar ? '' : 'layui-hide') +
								'<p>点击上传，或将文件拖拽到此处</p>' +
								'</div>' +
								'</div>',
							area: ['auto', '280px'],
							success: function(elem) {
								var loading;
								var uploadIns = upload.render({
									elem: '#avatar-upload',
									url: lianyi.api({ m: 'imgUpload' }, 1),
									accept: 'images', // 指定允许上传时校验的文件类型，可选值有：images（图片）、file（所有文件）、video（视频）、audio（音频）
									acceptMime: 'images', // 规定打开文件选择框时，筛选出的文件类型
									exts: 'gif|jpg|jpeg|png',
									size: 1024 * 10,
									before: function(obj) {
										loading = lianyi.load('上传中...');
									},
									done: function(res) {
										layer.close(loading);
										var code = res.code,
											msg = res.msg;

										if (res.code === 0)
											lianyi.success(msg, function() {
												$('#avatar-upload > .layui-icon-upload').addClass('layui-hide');
												$('#avatar-upload > img').removeClass('layui-hide').attr('src', res.imgUrl);
											});
										else
											lianyi.fail(msg, function() {
												lianyi.jump(res);
											});
									},
									error: function(index, upload) {
										layer.close(loading);
										lianyi.fail('上传出错');
									}
								});
							},
							btn1: function(index, elem) {
								var avatar = $('#avatar-upload > img').attr('src');

								if (avatar == data.avatar || (data.avatar === null && avatar === ''))
									return lianyi.fail('无变化！');
								lianyi.request({
									url: lianyi.api('update', 1),
									data: { id: data.id, avatar: avatar },
									msg: '正在修改...',
									success: function(res) {
										layer.close(index);
										obj.update({ avatar: avatar });
									}
								});
								return false;
							},
							btn2: function(index, elem) {
								avatar = '';
								if (avatar === data.avatar || (data.avatar === null && avatar === '')) return lianyi.fail('无变化！');
								lianyi.request({
									url: lianyi.api('update', 1),
									data: { id: data.id, avatar: avatar },
									msg: '正在修改...',
									success: function(res) {
										layer.close(index);
										obj.update({ avatar: avatar });
									}
								});
								return false;
							}
						});
						break;
					case 'status':
						var status = data.status === 1 ? 0 : 1;
						lianyi.request({
							url: lianyi.api('update', 1),
							data: { id: data.id, status: status },
							msg: '正在' + (status === 1 ? '启用' : '禁用') + '管理员...',
							success: function(res) {
								obj.update({ status: status });
							}
						});
						break;
					case 'update':
						window.params = {
							data: obj.data
						};
						window.upTable = function(field) {
							obj.update($.extend({}, field));
						};
						layer.open({
							title: '修改',
							shadeClose: true,
							maxmin: true,
							type: 2,
							content: lianyi.iframe('action'),
							area: ['360px', '380px'],
							success: function(layero, index) {
								// layer.iframeAuto(index);
							},
							end: function() {
								window.params = undefined;
							}
						});
						break;
					case 'delete':
						layer.confirm('确定删除管理员：<b style="color: red;">' + data.user + (data.name ? ' (' + data.name + ')' : '') + '</b> ？', {
							title: '删除管理员',
							shadeClose: true,
							btn: ['删除', '取消'],
							btn1: function(index) {
								lianyi.request({
									url: lianyi.api('delete', 1),
									data: { id: data.id },
									msg: '正在删除...',
									success: function(res) {
										layer.close(index);
									}
								});
								return false;
							}
						});
						break;
				}
			});

			form.on('submit(search-submit)', function(obj) {
				var field = obj.field;

				table.reload('admin-list', {
					page: {
						curr: 1
					},
					where: field
				});
				
				return false;
			});
		});
	</script>
</body>

</html>